<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="plugins/vue.min.js"></script>
    <script src="plugins/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <!-- import CSS -->


</head>
<body>
<div id="app">
    <div v-for="(article,index) in articleList" @click="toDetail(article)">
        <el-card class="box-card" >
        <div slot="header" class="clearfix">
            <span>{{article.title}}</span>
        </div>
        <div  class="text item">
            {{article.detail}}
        </div>
      </el-card>
        <el-row style="height: 10px"></el-row>

    </div>
</div>
</body>
<!-- import Vue before Element -->




<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            ids:[],

           articleList:[{
               id: "1",
               title: "简单爱",
               detail: "说不上为什么我变得很主动，" +
                   "若爱上一个人什么都会值得去做, " +
                   "我想大声宣布对你依依不舍 ，"+
                   "连隔壁邻居都猜到我现在的感受",

           },
               {
                   id: "2",
                   title: "七里香",
                   detail: "那饱满的稻穗幸福了这个季节，" +
                       "而你的脸颊像田里熟透的番茄，" +
                       "你突然对我说七里香的名字很美，" +
                       "我此刻却只想轻吻你倔强的嘴",

               },
               {
                   id: "3",
                   title: "手写的从前",
                   detail: "初恋是整边，手写的从前，" +
                       "还记得那年秋天说了再见，" +
                       "当恋情已走远我将你深埋在心里面",

               },
               {
                   id: "4",
                   title: "听妈妈的话",
                   detail: "小朋友你是不是有很多问好，" +
                       "为什么别人在看漫画我却在学画画，" +
                       "对着钢琴说话，" +
                       "别人在玩游戏我却在一旁背我的abc",

               },




           ],
            multipleSelection: [],
            dialogVisible: false



        },



        methods: {

            findAll(){

                axios.get("/article").then((res)=>{
                    if (res.data.flag==true){
                        this.articleList = res.data.data
                    }



                })
            },


            toDetail(article){
                window.location.href="/articleDetail.html?id="+article.id;
            }






        },

        created(){
            this.findAll()

        }


    })
</script>
</html>